<div class="sidebar-shortcuts" id="sidebar-shortcuts">
    <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
        <button class="btn btn-success">
            <i class="ace-icon fa fa-signal"></i>
        </button>

        <button class="btn btn-info">
            <i class="ace-icon fa fa-pencil"></i>
        </button>

        <button class="btn btn-warning">
            <i class="ace-icon fa fa-users"></i>
        </button>

        <button class="btn btn-danger">
            <i class="ace-icon fa fa-cogs"></i>
        </button>
    </div>

    <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
        <span class="btn btn-success"></span>

        <span class="btn btn-info"></span>

        <span class="btn btn-warning"></span>

        <span class="btn btn-danger"></span>
    </div>
</div><!-- /.sidebar-shortcuts -->
<div id="sidebar-div">
    <ul class="nav nav-list" id="sidebar-menu">
        <li data-level="1" v-for="res in resources" @click="changeArrow(res)">

            <a
                    href="javascript:void(0);" class="dropdown-toggle"
                    :haschild="res.check_Child_State==0?'true':'false'"
            >
                <i class="menu-icon" :class="res.icon"></i>
                <span class="menu-text"
                      style="vertical-align: middle;"
                > {{res.name}}</span>
                <b  :class="res.arrow?' fa fa-angle-up':' fa fa-angle-down'" class="arrow"></b>
            </a>
            <b class="arrow"></b>

            <ul class="submenu nav-hide" style="display:none;">
                <li data-level="2" v-for="children in res.children">

                    <a
                            :href="children.url"
                            id="menu_manageruserCenter"
                            haschild="children.check_Child_State==0?'true':'false'"
                    >
                        <i class="menu-icon" :class="children.icon"></i>
                        <span class="menu-text"> {{children.name}} </span>
                    </a>
                    <b class="arrow"></b>

                </li>
            </ul>
        </li>
    </ul>
</div><!-- /.nav-list -->

<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
    <i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left"
       data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
<script type="text/javascript" src="static/vue/vue.js"></script>
<script type="text/javascript" src="static/vue/axios.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: '#sidebar-div',  //选中整个main
        data: {
            resources: {},
        },
        methods: {
            changeResourceToTree: function (resources) {
                // debugger;
                let setting = {
                    data: {
                        simpleData: {
                            enable: true,
                            pIdKey: "parentId",//父节点的名字
                        }
                    }
                };
                let tree = $.fn.zTree.init($("#r"), setting, resources);
                this.resources=tree.getNodes();
                $.fn.zTree.destroy("r");
                console.log(this.resources)

                for (let i = 0; i <this.resources.length ; i++) {
                    // this.resources[i].arrow=false;
                    Vue.set(this.resources[i],'arrow',false)
                }

            },
            changeArrow:function (resource) {
                // debugger;
                resource.arrow=!resource.arrow;
            }
        },
        created: function () {
            let mapStr = sessionStorage.getItem("map");
            let map = JSON.parse(mapStr);
            if (map != undefined) {
                this.changeResourceToTree(map.resources);
            } else {
                // location.href='login.html';
            }
        }
    });
</script>